<template>
	<div class="content">
		预约场馆：场馆A 预约时间：2020年6月22日 周一：07:00-08:00 已预约：5/10人
		<!-- Form -->
		<el-button type="primary" @click="dialogFormVisible = true">添加</el-button>
		<!-- 弹出场馆预约模态框 -->
		<el-dialog title="添加预约信息" :visible.sync="dialogFormVisible">
			<el-form :model="form">
				<el-form-item label="场地名称" :label-width="formLabelWidth">
					<el-input v-model="form.appSiteName" autocomplete="off" placeholder="2020-06-30"></el-input>
				</el-form-item>
				<el-form-item label="场地地点" :label-width="formLabelWidth">
					<el-input v-model="form.appAddress" autocomplete="off" placeholder="09:00">></el-input>
				</el-form-item>
				<el-form-item label="场地分类" :label-width="formLabelWidth">
					<el-input v-model="form.appType" autocomplete="off" placeholder="09:00">></el-input>
				</el-form-item>
				<el-form-item label="场地类型" :label-width="formLabelWidth">
					<el-input v-model="form.appSiteType" autocomplete="off" placeholder="教室">></el-input>
				</el-form-item>
				<el-form-item label="开始时间" :label-width="formLabelWidth">
					<el-input v-model="form.appStartTime" autocomplete="off" placeholder="场馆">></el-input>
				</el-form-item>
				<el-form-item label="结束时间" :label-width="formLabelWidth">
					<el-input v-model="form.appEndTime" autocomplete="off" placeholder="场馆">></el-input>
				</el-form-item>
				<el-form-item label="备注" :label-width="formLabelWidth">
					<el-input v-model="form.appRemark" autocomplete="off" placeholder="17:00">></el-input>
				</el-form-item>
				<el-form-item label="对应场地的具体信息ID" :label-width="formLabelWidth">
					<el-input v-model="form.siteID" autocomplete="off" placeholder="场馆">></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="input">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
export default {
	data() {
		return {
			dialogFormVisible: false,
			form: {
				appSiteName: '',
				appAddress: '',
				appType: '',
				appSiteType: '',
				appStartTime: '',
				appEndTime: [],
				appRemark: '',
				siteId: ''
			},
			formLabelWidth: '120px'
		}
	},
	methods: {
		// 添加内容
		input() {
			this.dialogFormVisible = false
		},
	}
}
</script>

<style>
</style>
